import {
  createStore,
  Store,
  useStore as baseUseStore,
  createLogger,
  GetterTree
} from 'vuex'
import { InjectionKey } from 'vue'

import app, { State as AppState } from './modules/app'
import permission, { State as PermissionState } from './modules/permission'

export interface State {
  app: AppState
  permission: PermissionState
}

const getters: GetterTree<State, State> = {
  routers: state => state.permission.routes
}

export const store = createStore<State>({
  modules: {
    app,
    permission
  },
  getters,
  plugins: [createLogger()]
})

export const key: InjectionKey<Store<State>> = Symbol()

export function useStore(): Store<State> {
  return baseUseStore(key)
}
